<!--任务调度-->
<template>
  <div class="template-content">
    <Row :gutter="4">
      <Col span="3"><Input :placeholder="$t('task')" v-model="queryParam.where.jobDesc"></Input> </Col>
      <Col span="1"><Button type="primary" icon="ios-search" @click="getTable">{{$t('search')}}</Button></Col>
    </Row>
    <Card>
      <Table border :columns="columns" :data="tableData">
        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" size="small" :title="$t('edit')" icon="md-create" style="margin-right: 5px" @click="edit(row)"></Button>
        </template>
        <template slot-scope="{ row, index }" slot="status">
          <i-switch ref="statusSwitch" true-color="#13ce66" false-color="#ff4949" :value="row.status"
                    :true-value=1
                    :false-value=0
                    size="large" @on-change="statusChange(row)"
                    :before-change="beforeChange">
            <span slot="open">{{$t('endabled')}}</span>
            <span slot="close">{{$t('disabled')}}</span>
          </i-switch>
        </template>
      </Table>
      <TopnavPage v-model="queryParam.page" @on-change="changePage"></TopnavPage>
    </Card>
    <!-- 数据编辑  -->
    <Modal width="650" v-model="addModal"  :loading="modalLoading" :title="$t('edit')"  @on-ok="modelOk"  @on-cancel="modelCancel"> <!-- footer-hide="false" -->
      <Form ref="form1" :model="rowData" label-position="right" :label-width="80">
        <FormItem :label="$t('name')"><Input v-model="rowData.jobDesc"></Input></FormItem>
        <Cron :showItems="cronShowItems" v-model="rowData.cron"></Cron>
        <FormItem :label="$t('status')">
          <i-switch v-model="rowData.status" true-color="#13ce66" false-color="#ff4949"
                    :true-value="1"
                    :false-value="0"
                    size="large" >
            <span slot="open">{{$t('endabled')}}</span>
            <span slot="close">{{$t('disabled')}}</span>
          </i-switch>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import QuartzSchedule from '@/api/QuartzSchedule';
import TopnavPage from "_c/topnav/TopnavPage";
import Cron from "_c/cron/cron";
import Device from "@/api/Device";
import {apiResult} from "@/libs/util";
export default {
  name: 'Schedule',
  components: {TopnavPage,Cron},
  computed:{
    columns(){
      return [{title: this.$t('operate'), key: 'action', width: 150,slot: 'action',align: 'center'},
        {title: this.$t('name'), key: 'jobDesc', sortable: true},
        {title: this.$t('cron_expression'), key: 'cron', sortable: true},
        {title: this.$t('status'), key: 'status', slot: 'status',sortable: true}]
    }
  },
  data() {
    return {
      api: new QuartzSchedule(),
      cronShowItems: ["分"],//只能控制分钟级
      addModal: false,
      modalLoading: false,
      tableData: [],
      rowData: {
        id: null,
        JobName: null,
        jobDesc: null,
        cron: null,
        status: null,
      },
      queryParam: {
        page: {
          desc: ['create_time'],
          pages: 0,
          size: 15,
          total: 0,
          current: 1,
        },
        where: {jobDesc: null, status: null},
      },

    }
  },
  methods: {
    getTable() {
      /** 生成查询条件 */
      //console.log(JSON.stringify(this.queryParam));
      this.api.queryPage(JSON.stringify(this.queryParam)).then(res => {
        this.tableData = null;
        apiResult(res.data,false,result=>{
          this.queryParam.page.total=result.data.total;
          this.tableData = result.data.records;
        });
      })
    },
    changePage() {
      this.getTable()
    },
    statusChange(row){ },
    /** 可以阻止改变状态的值*/
    beforeChange(){
      let canChange = new Promise(function (resolve, reject) {
        ;

      });
      return canChange;
    },
    modelOk(){
      this.saveData();
    },
    modelCancel(){
      this.addModal = false;
    },
    edit(row) {
      this.rowData.id=row.id;
      this.rowData.jobName=row.jobName;
      this.rowData.jobDesc=row.jobDesc;
      this.rowData.cron=row.cron;
      this.rowData.status=row.status;
      this.addModal = true;
    },
    saveData(){
      /** 修改 */
      console.log("saveData: %o",this.rowData);
      if (this.rowData.id != null){
        console.log(JSON.stringify(this.rowData));
        this.api.updateQuartzJob(JSON.stringify(this.rowData)).then(res => {
          //this.$Message.error(res.data.msg);
          this.addModal = false;
          apiResult(res.data,true,result=>{
            this.getTable();
          })

        })
      }else{
      }
    },
  },
  mounted() {
    this.getTable();
    this.cronShowItems = [this.$t("min")];
  }
}
</script>
<style lang="less">
@import ".././template";
</style>
